import React from 'react';
import { connect } from 'dva';
import styles from './MatList.css';
import { Card, Input, Table, notification, Modal, Button } from 'antd';
import EditMat from '../../../components/edit/EditMat';
import selectSrcService from '../../../services/selectSrcService';
const { Search } = Input;

function MatList({ datas, pageSize, currentPage, totalCount, loading, dispatch, params }) {
  function loadList(page, pageSize, queryStr) {
    dispatch({ type: 'matMgr/listTurnToPage', payload: { matType: params.matType, currentPage: page, pageSize: pageSize, queryStr: queryStr } });
  }
  // const rowSelection = {
  //   onChange: (selectedRowKeys, selectedRows) => {
  //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  //   },
  //   getCheckboxProps: record => ({
  //     // disabled: record.name === 'Disabled User',    // Column configuration not to be checked
  //   }),
  // };
  function createHandler(values) {
    dispatch({
      type: 'matMgr/create',
      payload: values
    })
    loadList();
  }
  function updateHandler(values) {
    dispatch({
      type: 'matMgr/update',
      payload: values
    })
    loadList();
  }
  const clmConfigs = [
    {
      title: '代码',
      dataIndex: 'id',
      key: 'id',
      render: (text, record) => <EditMat onOk={updateHandler.bind(null)} record={record}> <a>{text}</a></EditMat>,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '规格',
      dataIndex: 'specName',
      key: 'specName',
    },
    {
      title: '品类',
      dataIndex: 'categoryName',
      key: 'categoryName',
    },
    {
      title: '追溯标识',
      dataIndex: 'traceId',
      key: 'traceId'
    },
    {
      title: '关联比例',
      dataIndex: 'packingScale',
      key: 'packingScale',
    },
    {
      title: '保质期',
      dataIndex: 'usefulLife',
      key: 'usefulLife',
    }
  ];
  const pagination = {
    current: currentPage,
    pageSize: pageSize,
    onChange: loadList,
    total: totalCount,
    showTotal: (t) => `总计：${t}`,
  };
  function onRowDoubleClickHandler(record, index, event) {
    editForm = <EditMat visible={true} record={record} />;
  }
  return (
    <div className={styles.normal}>
      <Card>
        <Search
          placeholder="请输入查询条件"
          size="large"
          style={{ width: 300 }}
          onSearch={value => loadList(1, pageSize, value)} />
        <EditMat onOk={createHandler.bind(null)}><Button className={styles.fnBtn} type="primary">添加</Button></EditMat>
      </Card>
      <Table
        onRowDoubleClick={onRowDoubleClickHandler}
        pagination={pagination}
        columns={clmConfigs}
        loading={loading}
        dataSource={datas}
        rowKey="id"
        bordered />
    </div>
  );
}

function mapStateToProps(state) {
  return {
    datas: state.matMgr.list.datas,
    pageSize: state.matMgr.list.pageSize,
    currentPage: state.matMgr.list.currentPage,
    totalCount: state.matMgr.list.totalCount,
    loading: state.loading.models.matMgr
  };
}

export default connect(mapStateToProps)(MatList);
